<template>
  <el-pagination class="page-box"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 background
                 :current-page="childMsg.currentPage"
                 :page-sizes="[10, 15, 20]"
                 :page-size="childMsg.pageSize"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="childMsg.total">
  </el-pagination>
</template>
<script>
export default {
  name: 'Pagination',
  props: ['childMsg'],
  data() {
    return {
      pageParams: {
        currentPage: this.childMsg.currentPage,
        pageSize: this.childMsg.pageSize
      }
    }
  },
  created() {
  },
  methods: {
    handleSizeChange(value) {
      this.pageParams.pageSize = value
      this.$emit('callFather', this.pageParams)
      console.log(JSON.stringify(this.pageParams))
    },
    handleCurrentChange(value) {
      this.pageParams.currentPage = value
      this.$emit('callFather', this.pageParams)
      console.log(JSON.stringify(this.pageParams))
    }
  }
}
</script>

<style>
.page-box {
  margin: 10px auto;
}
</style>
